import React, { Suspense } from "react";
import { useToggle } from "ahooks";
// import Comp from "./Component/Comp";
const Comp = React.lazy(() => import("./Component/Comp")); // 告诉编译工具这个组件代码要分割

// 异步组件应用场景: 图表，前端实现导入导出，模态框，比较大第三方插件
function App() {
    const [state, { toggle }] = useToggle(false);
    return (
        <div>
            <p>
                {state ? (
                    // Suspense 可以指定加载指示器。但不是所有异步问题都可以使用，目前适用于异步组件的场景
                    // fallback 在加载时候显示
                    <Suspense fallback={<div>Loading...</div>}>
                        <Comp></Comp>
                    </Suspense>
                ) : null}
            </p>
            <br />
            <button onClick={toggle}>toggle</button>
        </div>
    );
}
export default App;
